<template>
  <div class="team-stats left-back">
    <div class="team-header">
      <!-- <h3>班组分布</h3> -->
      <div class="team-controls">
        <span style="font-size: 22px;color: #D9F7FF;"></span>参建单位名称：
        <a-select
          
          v-model:value="selectedType"
          style="width: 303px;
    height: 44px;"
          :bordered="false"
          :options="options"
          @change="handleTypeChange"
        >
          
        </a-select>
      </div>
    </div>
    <a-table
      :columns="columns"
      :data-source="filteredData"
      :pagination="false"
      :loading="loading"
      :bordered="false"
      size="small"
      :rowClassName="() => 'table-row-with-spacing'"
      :scroll="{ y: 240 }"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'teamName'">
          <span class="highlight">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex === 'totalNum'">
          <span class="highlight1">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex === 'presentNum'">
          <span class="highlight2">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex === 'presentRatio'">
          <span class="highlight3">{{ text }}</span>
        </template>

      </template>
    </a-table>
  </div>
</template>

<script setup>


import { ref, onMounted } from 'vue'
import { getTeamWorkerStatic } from "@/js/api/businessApi.js"
const loading = ref(false);
const emit = defineEmits(['showDetail'])
const options = ref([{
  label: '全部班组',
  value: 'all'
}
])
const selectedType = ref('all')
const handleTypeChange = (value) => {
  selectedType.value = value
  if(value === 'all'){
    filteredData.value = lastList;
  }else{
    filteredData.value = lastList.filter(item => item.teamName === value);
  }
}
const searchText = ref('')

const columns = [
  {
    title: '班组',
    dataIndex: 'teamName',
    width: 120,
    align: 'center',
  },
  {
    title: '总人数',
    dataIndex: 'totalNum',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.totalNum - b.totalNum,
  },
  {
    title: '在线人数',
    dataIndex: 'presentNum',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.presentNum - b.presentNum,
  },
  {
    title: '在线率',
    dataIndex: 'presentRatio',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.presentRatio - b.presentRatio,
  },
]

const filteredData = ref([])

const handleSearch = () => {
  // 可以在这里添加搜索逻辑
}
let lastList = [];
const showDetail = (record) => {
  emit('showDetail', record)
}
const initData = function(){
  getTeamWorkerStatic({"projectId": "19"}).then((data)=>{
    console.log(data);
    if(data.data){
      const list = data.data.map((item,index)=>{
        if(options.value.find(option => option.value !== item.teamName)){
          options.value.push({
            label: item.teamName,
            value: item.teamName
          })
        }
        return {
          key: index + 1,
          teamName: item.teamName,
          totalNum: item.totalNum,
          presentNum: item.presentNum,
          presentRatio: item.presentRatio
        }
      })
      if(list){
        filteredData.value = list;
        lastList = list;
      }
    }
  })
}
onMounted(()=>{
  initData();
})
</script>

<style scoped>
.team-stats {
  border-radius: 8px;
  padding: 1.5vh;
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.team-header h3 {
  margin: 0;
  color: #409EFF;
  font-size: 16px;
}

.team-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.completion-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-icon {
  color: #409EFF;
  cursor: pointer;
}

.highlight {
  color: #409EFF;
  font-weight: bold;
}

:deep(.ant-table) {
  background-color: transparent;
  color: #fff;
}

:deep(.ant-table-thead > tr > th) {
  background:transparent !important;
  /* background-size: 100% 100%; */
  background-size: 212% 68%;
    color: #fff !important;
    background-position-y: 15px;
    border-bottom: 0px solid #f0f0f0;
}

:deep(.ant-table-tbody > tr > td) {

  background-color: transparent !important;
  color: #fff;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
</style>

